<template>
	<view @click="toDetail" class="mx-32 wrapper border-box rounded-radius-l flex position-relative overflow-hidden flex-column align-stretch shadow">
		<view v-if="!itemData.cover" class="cover w_100 flex align-center justify-center">
			<u-loading-icon></u-loading-icon>
		</view>
		<view v-else class="cover w_100 position-relative overflow-hidden">
			<image :src="itemData.cover" class="position-absolute top-0 left-0 w_100" mode="widthFix"></image>
		</view>
		<view class="bg-white border-box px-32 py-32">
			<view class="flex align-center">
				<text class="font-lg-l font-weight-heavy">{{itemData.name}}</text>
				<text class="font-lg-l text-gray-1 font-weight-normal">({{itemData.total === undefined ? '-' : itemData.total}})</text>
			</view>
			<view v-if="time" class="font text-gray-1 font-weight-bold">{{time}}更新</view>
			<view v-else class="font text-gray-1 font-weight-bold">加载中...</view>
		</view>
	</view>
</template>

<script setup>
	import {computed} from 'vue'
	const props = defineProps({
		itemData: {
			type: Object,
			default: () => ({})
		}
	})
	const time = computed(() => {
		if (props.itemData.total === 0) {
			return '暂未'
		}
		
		return props.itemData.updateTime ? uni.$u.timeFrom(props.itemData.updateTime,  false) : ''
	})
	const toDetail = () => {
		uni.navigateTo({
			url: '/pages/detail/detail?viewId=' + props.itemData.viewID
		})
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		margin-bottom: 74rpx;
		.cover {
			height: 566rpx;
		}
		.default_cover {
			height: 200rpx;
			width: 200rpx;
		}
	}
	
</style>